import Vue from 'vue'
// 导入路由并安装
import VueRouter from 'vue-router'
Vue.use(VueRouter)

// 导入组件
import Home from '@/components/MyHome'
import Login from '@/components/MyLogin'
import notFound from '@/components/notFound'

// 导入二级路由组件
import Goods from '@/components/menus/MyGoods'
import Orders from '@/components/menus/MyOrders'
import Rights from '@/components/menus/MyRights'
import Settings from '@/components/menus/MySettings'
import Users from '@/components/menus/MyUsers'
import detail from '@/components/user/MyUserDetail'

// 设置规则
const routes = [
  // 我这是直接把访问home这个组件的路径设置为 路径毛都不需要输入
  {
    path: '/', component: Home, children: [
      // 二级路由路径可以不加/
      { path: 'goods', component: Goods },
      { path: 'orders', component: Orders },
      { path: 'rights', component: Rights },
      { path: 'settings', component: Settings },
      { path: 'users', component: Users },
      { path: 'detail/:id', component: detail, props: true },
    ]
  },
  { path: '/login', component: Login },
  { path: '/404', component: notFound },
]

// 实例化路由对象
const router = new VueRouter({
  routes
})

// 把路由对象暴露出去
export default router

// 声明一个白名单数组
const whiteList = ['/login', '/404']

// 全局前置守卫
// to: 要去哪
// from: 从哪来
// to和from都是一个对象，里面包含了这个路由的相关信息。
// 其中有个属性叫 path， 就是得到了这个组件的路径
// next：这是一个函数，调用这个函数就代表放行（代表给你访问）
router.beforeEach((to, from, next) => {

  // 判断要前往的路由在不在白名单里面
  if (whiteList.includes(to.path)) {

    next()
  } else {
    // 要去的路由不在白名单里
    // 获取本地存储的token
    let token = localStorage.getItem('token')

    if (token) {
      // 登录了就放行
      next()
    } else {
      alert('请先登录')
      // 没有token代表没有登录
      next('/login')
    }
  }
})
